<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
         <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="#FFFFFF"
            active-text-color="#ffd04b"
            @open="handleOpen"
            @close="handleClose"
            router
            :collapse="isCollapse"
            :collapse-transition="false"
          >
           
           <div class="logo-title">
             <img src="../assets/img/logo.png" alt="">
             <span v-if="isTitle">DevOps管理系统</span>
           </div>
           
            <template v-for="menu in this.$router.options.routes" :key="menu"> <!--$router获取路由对象-->

            <!--处理一级菜单没有子路由-->
            <el-menu-item v-if="!menu.children" :index="menu.path">
              <el-icon><icon-menu /></el-icon>
              <span>{{menu.name}}</span>
            </el-menu-item>

            <!--处理仪表盘-->
            <el-menu-item v-if="menu.path == '/'" :index="menu.children[0].path">
              <el-icon><component :is="menu.children[0].icon"></component></el-icon>
              <span>{{menu.children[0].name}}</span>
            </el-menu-item>

            <!--处理一级菜单有子路由-->
            <el-sub-menu v-else-if="menu.children" :index="menu.path">
              <template #title>
                <el-icon><component :is="menu.icon"></component></el-icon>
                <span>{{ menu.name }}</span>
              </template>
              <!--循环生成二级菜单-->
              <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
            </el-sub-menu>

            </template>

          </el-menu>

      </el-aside>
      <el-container>
        <el-header>
           <!--折叠-->
           <div>
             <el-icon :size="25" @click="toggleCollapse"><Fold/></el-icon>
           </div>
           <!--用户标识-->
           <div>
               <img src="../assets/img/touxiang.png" class="touxiang">
               <el-dropdown>
                <span class="el-dropdown-link">
                  阿良
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
           </div>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "Layout",
        data() {
          return {
            isCollapse: false,  // 导航栏显示与隐藏
            isTitle: true // 显示与隐藏标题
          }
        },
        methods: {
          toggleCollapse() {
            this.isCollapse = !this.isCollapse;
            this.isTitle = !this.isTitle;
          }
        }
    }
</script>

<style scoped>
    .el-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-main {
        background: #f5f5f5;
    }
    .common-layout,.el-container,.el-menu-vertical-demo {
        height: 100%;
    }
    .touxiang {
      width: 25px;
      height: 25px;
      border-radius: 3px;
    }
    .logo-title img {
      width: 30px;
      height: 30px;
      margin-left: 15px;
      margin-top: 16px;
    }
    .logo-title span {
      color: white;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
      position: relative;
      bottom: 10px;
    }
    .logo-title {
      margin-bottom: 12px;
    }
</style>